<template>
	<view class="content">
		<view class="order_one">
			<view class="order_one_left" v-for="item in goosList" :key='item.goods_id'>
				<image :src="item.goods_image" mode=""></image>
				<view class="order_one_text">
					<view class="order_ones">
						<text>{{item.goods_name}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
					<view class="order_ones">
						<text class="gg">{{item.ertitle}}</text>
						<text class="gg">X{{item.num}}</text>
					</view>
				</view>
			</view>
	<!-- 		<view class="order_one_left">
				<image src="../../../static/images/a7.png" mode=""></image>
				<view class="order_one_text">
					<view class="order_ones">
						<text>马来西亚猫山王榴莲1个装</text>
						<text class="price">￥269</text>
					</view>
					<view class="order_ones">
						<text class="gg">规格：1.8-2.2kg（液氮冷冻）</text>
						<text class="gg">X2</text>
					</view>
				</view>
			</view> -->
		<!-- 	<view class="order_one_item">
				<view class="order_one_yf">
					<text>运费</text>
					<text class="gg">￥0.00</text>
				</view>
				<view class="order_one_yf">
					<text>备注</text>
					<text class="gg">无</text>
				</view>
			</view> -->
			

		<view class="order_one_sh">
			<view class="order_sh">
				<text style="background-color: #FF3542; border: none; color: #fff;" v-if="info.order_status === 0" @tap='$open("/pages/pay/payment/payment?oid="+info.id+"&order_no="+info.order_no+"&amount="+info.order_money)'>去支付</text>
				<text style=" border: 1upx solid #dddddd; color: #999999;" v-if="info.order_status === 0" >待支付</text>
				<text style="background-color: #4CD964; border: none; color: #fff;" v-if="info.order_status === 1"  @tap='confirm(info.id)'>确认收货</text>
				<text v-if="info.order_status === 2"  @tap='confirm(info.id)'>确认收货</text>
				<text v-if="info.order_status === 3"  @tap='confirm(info.id)'>确认收货</text>
				<text style=" border: 1upx solid #dddddd; color: #999999;" v-if="info.order_status === 1" >已支付代配送 </text>
				<text v-if="info.order_status === 2" >配送中</text>
				<text v-if="info.order_status === 3" >已到达</text>
				<text v-if="info.order_status === 4" @tap='$open("/pages/user/sale1/sale1?oid="+info.id)'>申请售后</text>
				<text v-if="info.order_status === 4" >已完成</text>
				<text v-if="info.order_status === 5" >申请售后中</text>
				<text v-if="info.order_status === 6" >售后完成</text>
			</view>
			<view class="order_qrs">
				<!-- <text>共计{{}}件</text> -->
				<text class="zj"><text class="hj">合计</text>￥{{info.order_money}}</text>
			</view>
		</view>
				</view>	
		<view class="detail">
				<text>订单信息</text>
				<view class="detail_item">
					<text>订单编号：{{info.order_no}}</text>
					<text>下单时间：{{info.createtime}}</text>
					<text>支付时间：{{info.paytime}}</text>
					<text>完成时间：{{info.finishtime}}</text>
				</view>
		</view>
		<view class="detail_sh" v-if="info.order_status >=5">
			<text>售后信息</text>
			<view class="detail_item">
				<!-- 	<text>售后申请时间：2020-07-15  15:23:23</text>
				<text>售后原因：1111111111111</text>
				<view class="" style="display: flex;">
					<text>已传凭证：</text>
					 <image src="../../../static/images/a3.png" mode=""></image>
				</view>
				<text>处理时间：2020-07-15  15:32:23</text>
				<text>售后状态：已完成</text> -->
				<view class="detail_text" >
					<text class="sj">售后申请时间：</text>
					<text>{{GoosList.addtime}}</text>
				</view>
				<view class="detail_text" >
					<text class="sj">售后原因：</text>
					<text>{{GoosList.bz}}</text>
				</view>
				<view class="detail_text"  >
					<text class="sj">已传图片：</text>
					<image :src="item" mode=""v-for="item in GoosList.images"></image>
				</view>
				<view class="detail_text">
					<text class="sj">处理时间：</text>
					<text>{{GoosList.endtime}}</text>
				</view>
				<view class="detail_text">
					<text class="sj">售后状态：</text>
					<text v-if="GoosList.status === 1">已完成</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				'id':0,
				goosList:[],
				GoosList:{},
				info:{}
			};
		},
		// methods:{
		// 	receipt() {
		// 		uni.showModal({
		// 			content: '是否确认收货',
		// 			success(res) {
		// 				if (res.confirm) {
		// 					console.log('用户点击确定');
		// 					 loagText :'正在加载中。。。'
		// 				} else if (res.cancel) {
		// 					console.log('用户点击取消');
		// 				}
		// 			}
		// 		})
		// 	}
		// },
		onLoad(option) {
			//获取id
			this.id=option.id;
		},
		onShow() {
			this.Detailinfo()
			
		},
		
		methods:{
			Detailinfo(){
				this.$ajax(
				this.apiList.orderdetail,
				{
					oid:this.id
				},'POST'
				).then(res=>{
					this.info = res.data
					this.goosList = res.data.goods
					this.GoosList = res.data.shouhou
						console.log( this.GoosList )
					
				})
			},
			
			
			
			//确认收货
			confirm(id){
				uni.showModal({
					content:'是否确认收货',
					success: (res) => {
				if (res.confirm) {
						this.$ajax(
						this.apiList.confrim,
						{
							oid:id
						},'POST'
						).then(res=>{
						this.$sToast(res.msg)
							this.Detailinfo()
						})
					} else if (res.cancel) {
					
						}
					}
				})

			}
		}
	}
</script>
<style lang="scss">
	.content{
		background: #F5F5F5;
		height: 100vh;
		.order_one {
			margin: 20rpx;
			background: #fff;
			border-radius: 15rpx;
			.order_one_left {
				display: flex;
				padding: 20rpx;
		
				image {
					width: 128rpx;
					height: 128rpx;
				}
		
				.order_one_text {
					width: 80%;
		
					font-size: 24rpx;
					color: #212121;
					font-weight: 400;
					font-family: PingFang SC;
		
					text {
						display: block;
					}
		
					.order_ones {
						display: flex;
						justify-content: space-between;
						width: 100%;
						padding-bottom: 20rpx;
					}
		
					.price {
						color: red;
					}
		
					.gg {
						color: #BDBDBD;
						font-size: 20rpx;
					}
				}
			}
		
			.order_one_yf {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 10rpx 20rpx;
		
				text {
					font-size: 20rpx;
				}
		
				.gg {
					color: #BDBDBD;
				}
			}
		
			.order_one_sh {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 10rpx 20rpx;
		
				.order_sh {
					text {
						color: #FCBB21;
						font-size: 24rpx;
						border: 1px solid #FCBB21;
						padding: 5rpx 20rpx;
						border-radius: 20rpx;
						margin-right: 20rpx;
					}
				}
		
				.order_qrs {
					text {
						color: #BDBDBD;
					}
		
					.zj {
						padding-left: 10rpx;
						font-size: 28rpx;
						color: red;
		
						.hj {
							font-size: 28rpx;
							color: #212121;
						}
					}
				}
		
				text {
					font-size: 24rpx;
				}
			}
		}
	
		.detail{
			padding-left: 20rpx;
			margin: 20rpx;
			background: #fff;
			border-radius: 15rpx;
			text{
				font-size: 28rpx;
				color: #212121;
				font-family:PingFang SC;
				font-weight:400;
			}
			.detail_item{
				text{
					display: block;
					font-size: 20rpx;
					color: #212121;
					line-height:28px;
				}
			}
		}
		.detail_sh {
			padding-left: 20rpx;
			margin: 20rpx;
			background: #fff;
			border-radius: 15rpx;
		
			text {
				font-size: 28rpx;
				color: #212121;
				font-family: PingFang SC;
				font-weight: 400;
			}
		
			.detail_text {
				.sj{
					width: 25%;
				}
				display: flex;
				// width: 30%;
				text {
					display: block;
					font-size: 20rpx;
					color: #212121;
					line-height: 28px;
					
				}
		
				image {
					width: 100rpx;
					height: 100rpx;
					margin-top: 20rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
